<template>
    <div class="" v-if="state !== 'hidden'">

        <el-form ref="form" :model="form" :label-width="'write' == state ? '115px':'auto'"
                 :class="'write' == state ? 'write-form':'read-form'"
                 :label-position="'write' == state ? 'top':'left'">

            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>过户车辆</span>
                    <span></span>
                </div>

                <el-table border style="margin-bottom: 20px"
                          :data="form.carList">
                    <el-table-column
                        align="center"
                        show-overflow-tooltip
                        label="车架号"
                        min-width="180">
                        <template v-slot="{row}">
                            {{ row.vinNo|filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        show-overflow-tooltip
                        label="品牌/车系/车型"
                        min-width="350">
                        <template v-slot="{row}">
                            {{ row.brandName|filterNull }}/{{ row.seriesName|filterNull }}/{{ row.modelName|filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        label="车牌号"
                        show-overflow-tooltip
                        min-width="130">
                        <template v-slot="{row}">
                            {{ row.sourceCarNo|filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        show-overflow-tooltip
                        label="车辆产权公司"
                        min-width="130">
                        <template v-slot="{row}">
                            {{ form.transferBeforeName|filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        show-overflow-tooltip
                        label="登记日期"
                        min-width="150">
                        <template v-slot="{row}">
                            {{ row.issuanceDate|filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        show-overflow-tooltip
                        label="过户后车辆产权公司"
                        min-width="150">
                        <template v-slot="{row}">
                            {{ form.transferAfterName|filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        show-overflow-tooltip
                        label="过户时间"
                        min-width="150">
                        <template v-slot="{row}">
                            {{ form.transferTime|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="newCarNo" align="center"
                        min-width="200">
                        <template slot="header" slot-scope="scope">
                            <span>过户后车牌号<span class="state_red" v-if="'write' == state">*</span></span>
                        </template>
                        <template v-slot="{row}">
                            <el-form-item label-width="0" prop="newCarNo"
                                          :rules="'write' == state ? {
                                                             required: true,
                                                             message: '请输入过户后车牌号',
                                                             trigger: 'blur',
                                                             validator: (rule, value, callback) => validData(rule, row.newCarNo, callback)
                                                           }:{}">
                                <el-input v-if="'write' == state" maxlength="9"
                                          v-model.trim="row.newCarNo" clearable
                                          placeholder="请输入过户后车牌号"></el-input>
                                <span v-else>{{ row.newCarNo|filterNull }}</span>
                            </el-form-item>

                        </template>
                    </el-table-column>
<!--                    <el-table-column-->
<!--                        prop="gpsPrice" align="center"-->
<!--                        label="过户费用"-->
<!--                        min-width="200">-->
<!--                        <template v-slot="{row}">-->
<!--                            <el-form-item label-width="0" prop="gpsPrice"-->
<!--                                          :rules="'write' == state ? {-->
<!--                                                             required: true,-->
<!--                                                             message: '请输入过户费用',-->
<!--                                                             trigger: 'blur',-->
<!--                                                             validator: (rule, value, callback) => validData(rule, row.gpsPrice, callback)-->
<!--                                                           }:{}">-->
<!--                                <el-input maxlength="30"-->
<!--                                          @input="value=>{if(isNaN(form.gpsPrice)) { form.gpsPrice = '' }; if(form.gpsPrice.indexOf('.')>0){form.gpsPrice=form.gpsPrice.slice(0,form.gpsPrice.indexOf('.')+3)} form.gpsPrice = form.gpsPrice.replace(new RegExp(`^\\D*(\\d{8}(?:\\.\\d{0,2})?).*$`, ''), '$1')}"-->
<!--                                          v-if="'write' == state" v-model="row.gpsPrice" placeholder="请输入过户费用"></el-input>-->
<!--                                <span v-else>{{ row.gpsPrice|filterNull }}</span>-->
<!--                            </el-form-item>-->
<!--                        </template>-->
<!--                    </el-table-column>-->

                    <el-table-column min-width="130"
                                     align="center"
                                     class-name="small-padding fixed-width">
                        <template slot="header" slot-scope="scope">
                            <span>登记证<span class="state_red" v-if="'write' == state">*</span></span>
                        </template>
                        <template slot-scope="scope">

                            <el-form-item label-width="0" prop="registrationCertificate"
                                          :rules="'write' == state ? {
                                                             required: true,
                                                             message: '请上传登记证',
                                                             trigger: 'change',
                                                             validator: (rule, value, callback) => validData(rule, scope.row.registrationCertificate, callback)
                                                           }:{}">

                                <e-button size="mini" type="text"
                                          @click="handleUpload(scope.row, scope.$index)">{{ 'write' == state?'上传':'查看' }}
                                </e-button>
                            </el-form-item>

                        </template>
                    </el-table-column>

                    <el-table-column min-width="130"
                                     align="center"
                                     class-name="small-padding fixed-width">
                        <template slot="header" slot-scope="scope">
                            <span>行驶本<span class="state_red" v-if="'write' == state">*</span></span>
                        </template>
                        <template slot-scope="scope">
                            <el-form-item label-width="0" prop="drivingBook"
                                          :rules="'write' == state ? {
                                                             required: true,
                                                             message: '请上传行驶本',
                                                             trigger: 'change',
                                                             validator: (rule, value, callback) => validData(rule, scope.row.drivingBook, callback)
                                                           }:{}">

                                <e-button size="mini" type="text"
                                          @click="handleUpload2(scope.row, scope.$index)">{{ 'write' == state?'上传':'查看' }}
                                </e-button>
                            </el-form-item>


                        </template>
                    </el-table-column>


                </el-table>

            </div>

        </el-form>

        <!--    登记证-->
        <el-dialog :title="'write' == state?'上传登记证':'查看登记证'" :visible.sync="publicOpen" append-to-body width="45%">

            <span v-if="'write' != state && (selObj.registrationCertificate==undefined||selObj.registrationCertificate==null||selObj.registrationCertificate=='')">暂无数据</span>
            <ImageCommon v-else :disabled="'write' != state" @input="valid()"
                         :up-type="2" info="选择附件" :limit="9" v-model="selObj.registrationCertificate"></ImageCommon>

            <div slot="footer">
                <el-button type="primary" @click="publicOpen=false">确 定</el-button>
            </div>
        </el-dialog>

        <!--    行驶本-->
        <el-dialog :title="'write' == state?'上传行驶本':'查看行驶本'" :visible.sync="publicOpen2" append-to-body width="45%">

            <span v-if="'write' != state && (selObj2.drivingBook==undefined||selObj2.drivingBook==null||selObj2.drivingBook=='')">暂无数据</span>
            <ImageCommon v-else :disabled="'write' != state" @input="valid()"
                         :up-type="2" info="选择附件" :limit="9" v-model="selObj2.drivingBook"></ImageCommon>

            <div slot="footer">
                <el-button type="primary" @click="publicOpen2=false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

export default {
    name:'TransferFeedback',
    dicts: ["gps_workorder_status"],
    props: {
        value: {
            default: {},
        },
        state: {
            default: "write",
        },
    },
    computed: {
        form: {
            get() {
                return this.value;
            },
            set(value) {
                this.$emit("input", value);
            },
        },

    },
    watch: {
        form: {
            immediate: true,
            deep: true,
            handler(val) {
                if (this.firstEnter && val && val.carId) {
                    this.firstEnter = false
                    // this.getSim()
                }
            }
        }
    },
    data() {
        return {
            firstEnter: true,
            publicOpen:false,
            selObj:{},
            publicOpen2:false,
            selObj2:{},
        };
    },
    methods: {
        handleUpload(row, index) {
            this.publicOpen = true
            this.selObj = row
        },
        handleUpload2(row, index) {
            this.publicOpen2 = true
            this.selObj2 = row
        },

        validData(rule, value, callback) {
            // console.log('aaa', rule, value, callback)
            if (rule.required && !value) {
                // this.$modal.msgError(`未填写${value}`);
                callback(new Error(rule.message));
            } else {
                callback();
            }
        },
        async valid() {
            return new Promise((resolve) => {
                if ('write' == this.state) {
                    this.$refs["form"].validate(valid => {
                        resolve(valid);
                    });
                } else {
                    resolve(true)
                }
            })
        },
    }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

::v-deep .read-form .el-form-item__label-wrap,
::v-deep .read-form .el-form-item__content {
    margin-left: 0 !important;
}

.el-descriptions {
    margin: 0 -15px;
}
.el-form-item {
    width: 100%;
}

.el-table--small .el-table__cell {
    padding: 1px 0 !important;
}

::v-deep .el-tabs__item {
    font-size: 16px !important;
    //color: #333333;
    font-weight: bold;
}

.write-form .el-form-item {
    margin: 15px 0 !important;
    width: 100% !important;
}
</style>
